<template>

	<view class="wrapper">
		<scroll-view scroll-x="true" class="top_title f36">
			<view :class="{active:nav==-1}" @tap="setNav(-1)">币友圈</view>
			<view :class="{active:nav==0}" @tap="setNav(0)">应用</view>
			<view :class="{active:nav==1}" @tap="setNav(1)">行情</view>
			<view :class="{active:nav==2}" @tap="setNav(2)">资讯</view>
			<!-- <view :class="{active:nav==3}" @tap="setNav(3)">游戏</view> -->
			<!-- <view :class="{active:nav==4}" @tap="$sToast('敬请关注')">直播</view> -->
			<view :class="{active:nav==3}" @tap="setNav(3)">商城</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="main">
			<find v-if="nav==-1" ref='find'></find>
			<apply v-if="nav==0"></apply>
			<market v-if="nav==1"></market>
			<message v-if="nav==2" @open='open'></message>
			<shoppcart v-if="nav==3" @open='open'></shoppcart>
			<!-- <game v-if="nav==3"></game> -->
		</scroll-view>
	</view>

</template>


<script>
	import find from '../find/find'
	import apply from './find_apply'
	import market from './market'
	import game from './find_game'
	import message from './message'
	import shoppcart from './shoppcart'
	export default {
		components: {
			apply,
			market,
			game,
			message,
			find,
			shoppcart
		},
		data() {
			return {
				nav: 1
			}
		},
		onShow() {
			// this.$refs.find.init()
		},

		onLoad(e) {
			if (e.userId) {
				let userinfo = {
					userId: e.userId,
					access_token: e.access_token
				}
				uni.setStorageSync('userinfo', userinfo)
			}

		},

		methods: {
			open(index) {
				this.$open('./share?index=' + index)
			},
			setNav(index) {
				this.nav = index
			}
		}
	}
</script>

<style lang="scss">
	.main {
		height: calc(100% - 88rpx);
	}

	.top_title {
		width: 100%;
		height: auto;
		// margin-top: 80rpx;
		line-height: 88rpx;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 0 20upx;
		color: #fff;

		.active {
			color: #0297FE;
			font-weight: bold;
		}

		.activ {
			color: #fff;
			font-weight: bold;
		}

		view {
			display: inline-block;
			margin-right: 10%;
		}

	}

	.wrapper {
		overflow: hidden;
	}
</style>
